<template>
  <transition name="input-animation">
    <div class="input-transition input-verifycode-box" v-if="isShow">
      <inputModule :isShow="true" :placeholder="placeholder" :state="state" :tip="tip" class="input-verifycode" v-model="verifyCode.value" />
      <el-button :disabled="disabled" :loading="loading" @click="$emit('click')" class="item-btn btn-get-verifycode" type="primary" v-text="buttonText" />
    </div>
  </transition>
</template>


<script>
import inputModule from './miva-input.vue';

export default {
    name: 'LoginVerifyCodeModule',
    components: {
        inputModule,
    },
    props: ['sign', 'verifyCode', 'isShow'],
    computed: {
        state() {
            return this.verifyCode.state;
        },
        tip() {
            return this.verifyCode.tip;
        },
        disabled() {
            return this.verifyCode.disabled;
        },
        loading() {
            return this.verifyCode.sending;
        },
        signType() {
            return this.sign.signType;
        },
        signTypeText() {
            const obj = { phone: '短信', email: '邮箱' };
            return obj[this.signType] || '';
        },
        placeholder() {
            return `请输入${this.signTypeText}验证码`;
        },
        buttonText() {
            return `获取${this.signTypeText}验证码`;
        },
    },
};
</script>

<style lang="less">
.input-verifycode-box {
  width: 100%;
  display: flex;
  align-items: center;
  .input-verifycode {
    width: calc(100% - 150px);
    padding-top: 0 !important;
  }
  .btn-get-verifycode {
    width: 140px;
    height: 40px;
    margin-left: 10px;
    position: relative;
    border-radius: @formRadius;
    background-color: @navButton;
    border-color: @navButton;
  }
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  border-color: fade(@navButton, 50%) !important;
  background-color: fade(@navButton, 50%) !important;
}
</style>
